<script lang="jsx" setup>
import { nextTick, ref, watch } from 'vue';
import { getEngineeringDataInquiryColumns } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';
import { getRemarkData } from '@/service/api/modules/work-order-management/production-feed';

const props = defineProps({
  engineeringTableData: {
    type: Array,
    default: () => []
  }
});

console.log('props.engineeringTableData 22222222222222222222', props.engineeringTableData);

const engineeringData = ref(props.engineeringTableData);

console.log('engineeringData 2', engineeringData.value);

watch(
  () => props.engineeringTableData,
  newVal => {
    console.log('111111111111111111111', engineeringData);

    engineeringData.value = newVal;
  },
  { deep: true }
);

const topTableRef = ref(null);
const searchParams = ref({
  prodId: null,
  techId: null
});
const topColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'miName',
    dataIndex: 'miName',
    title: '项目名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'miData',
    dataIndex: 'miData',
    title: '数据项',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '编写',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '编写日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '最后修改日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  }
];

const emit = defineEmits(['planListLoadSuccess']);

const bottomColumn = ref([]);
const bottomTableRef = ref(null);

const remark = ref('工程备注');
function getRemark() {
  getRemarkData({
    prodId: searchParams.value.prodId
  }).then(({ data, error }) => {
    if (!error) {
      remark.value = data?.replace(/\n/g, '<br>');
    }
  });
}

function getData(params, engineeringData) {
  console.log('工程指示', params);

  searchParams.value = params;
  nextTick(() => {
    topTableRef.value.getData(1);
    bottomTableRef.value.getData(1);
    getRemark();
    getEngineeringDataInquiryColumns({
      techId: params.techId
    }).then(({ data, error }) => {
      if (!error && data.length) {
        console.log('data', data);
        const column = data.map(item => {
          return {
            key: item.fieldName,
            dataIndex: item.fieldName,
            title: item.caption,
            align: 'center',
            checked: true,
            ellipsis: true,
            width: 130
          };
        });
        bottomColumn.value = [
          {
            key: 'dataIndex',
            dataIndex: 'dataIndex',
            title: '序号',
            width: 70,
            align: 'center',
            checked: true,
            ellipsis: true
          },
          ...column
        ];
      } else {
        bottomColumn.value = [];
      }
    });
  });
}

function handleTableDataLoadSuccess(data) {
  emit('planListLoadSuccess', data);
}

defineExpose({
  getData
});
</script>

<template>
  <div class="h-full w-full">
    <div class="h-49% w-full">
      <Table
        ref="topTableRef"
        v-model:searchParams="searchParams"
        :column="topColumn"
        :show-row-selection="false"
        auto-generate-uuid
        row-key="screenId"
        :scroll="{ y: 'auto' }"
        :is-init-get-data="false"
        :is-pagination="false"
        url="/mes/BaseVppcissueplanodr/getPlanList"
        class="h-full"
        @table-data-load-sucess="handleTableDataLoadSuccess"
      >
        <template #title>
          <span class="color-#646cff">投料型号</span>
        </template>
      </Table>
    </div>

    <div class="footer-content mb-0.5% mt-0.5% h-14.5% w-full overflow-auto p-15px text-12px" v-html="remark"></div>

    <div class="mb-0.5% mt-0.5% h-35% w-full">
      <Table
        ref="bottomTableRef"
        v-model:searchParams="searchParams"
        class="h-full"
        :column="bottomColumn"
        :show-row-selection="false"
        row-key="id"
        :scroll="{ y: 'auto' }"
        :is-init-get-data="false"
        url="/erpsyncmes/Mi/findMiData2"
        :auto-generate-uuid="true"
        :is-pagination="false"
      >
        <template #title>工程数据</template>
      </Table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer-content {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
</style>
